<template>
  <div class="style-page">
    <div class="head-page-title">{{ showComponentData.title }}</div>
    <div class="line"></div>

    <div class="component-style">
      <p class="title">标签样式</p>
      <el-form :model="form" label-position="left" label-width="auto">
        <el-form-item label="分类标题颜色">
          <el-color-picker v-model="form.tabStyle.titleColor" />
          <el-input style="width: 160px; margin-left: 10px" v-model="form.tabStyle.titleColor">
            <template #append>
              <el-button @click="form.tabStyle.titleColor = '#333333'">重置</el-button>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="未选中标题颜色">
          <el-color-picker v-model="form.tabStyle.inactiveTitleColor" />
          <el-input style="width: 160px; margin-left: 10px" v-model="form.tabStyle.inactiveTitleColor">
            <template #append>
              <el-button @click="form.tabStyle.inactiveTitleColor = '#999999'">重置</el-button>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="下划线颜色">
          <el-color-picker v-model="form.tabStyle.underlineColor" />
          <el-input style="width: 160px; margin-left: 10px" v-model="form.tabStyle.underlineColor">
            <template #append>
              <el-button @click="form.tabStyle.underlineColor = '#ff4d4f'">重置</el-button>
            </template>
          </el-input>
        </el-form-item>

        <el-form-item label="标签文字大小">
          <div class="flex">
            <el-slider style="width: 70%" v-model="form.tabStyle.tabFontSize" :min="12" :max="30" />
            <el-input type="number" style="width: 30%; margin-left: 20px" v-model.number="form.tabStyle.tabFontSize"
              :min="12" :max="30">
              <template #append>px</template>
            </el-input>
          </div>
        </el-form-item>

        <!--        <el-form-item label="内容背景颜色">-->
        <!--          <el-color-picker v-model="form.tabStyle.backgroundColor" />-->
        <!--          <el-input style="width: 160px; margin-left: 10px" v-model="form.tabStyle.backgroundColor">-->
        <!--            <template #append>-->
        <!--              <el-button @click="form.tabStyle.backgroundColor = '#ffffff'">重置</el-button>-->
        <!--            </template>-->
        <!--          </el-input>-->
        <!--        </el-form-item>-->
      </el-form>
    </div>

    <!-- 分类编辑区域 -->
    <div class="component-style">
      <p class="title">内容样式</p>
      <el-form :model="form" label-width="auto">
        <el-form-item label="内容排版">
          <el-radio-group v-model="showComponentData.item_layout">
            <el-radio value="list">一行一个</el-radio>
            <el-radio value="row-2">一行两个</el-radio>
          </el-radio-group>
        </el-form-item>
        <!--        <el-form-item label="内容圆角">-->
        <!--          <div class="flex">-->
        <!--            <el-slider style="width: 70%" v-model="form.borderRadius" :min="6" :max="20" />-->
        <!--            <el-input-->
        <!--              style="width: 30%; margin-left: 20px"-->
        <!--              v-model="form.borderRadius"-->
        <!--              :min="6"-->
        <!--              :max="20"-->
        <!--            >-->
        <!--              <template #append>px</template>-->
        <!--            </el-input>-->
        <!--          </div>-->
        <!--        </el-form-item>-->
        <el-form-item label="标题名称">
          <el-radio-group v-model="showComponentData.show_item_name">
            <el-radio :value="0">不显示</el-radio>
            <el-radio :value="1">一行</el-radio>
            <el-radio :value="2">两行</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="标题颜色">
          <el-color-picker v-model="form.titleColor"></el-color-picker>
          <el-input style="width: 160px; margin-left: 10px" v-model="form.titleColor">
            <template #append>
              <el-button @click="form.titleColor = '#333333'">重置</el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item label="文字粗细">
          <el-radio-group v-model="form.titleFontWeight">
            <el-radio label="正常" :value="0" />
            <el-radio label="加粗" :value="600" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="标题文字大小">
          <div class="flex">
            <el-slider style="width: 70%" v-model="form.titleFontSize" :min="12" :max="30" />
            <el-input type="number" style="width: 30%; margin-left: 20px" v-model.number="form.titleFontSize" :min="12"
              :max="30">
              <template #append>px</template>
            </el-input>
          </div>
        </el-form-item>
        <el-form-item label="描述内容">
          <el-radio-group v-model="showComponentData.show_item_desc">
            <el-radio :value="0">不显示</el-radio>
            <el-radio :value="1">一行</el-radio>
            <el-radio :value="2">两行</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="描述颜色">
          <el-color-picker v-model="form.descColor"></el-color-picker>
          <el-input style="width: 160px; margin-left: 10px" v-model="form.descColor">
            <template #append>
              <el-button @click="form.descColor = '#333333'">重置</el-button>
            </template>
          </el-input>
        </el-form-item>
      </el-form>

      <p class="title">内容</p>
      <div v-for="(tab, tabIndex) in showComponentData.tabs" :key="tabIndex" class="category-area">
        <el-form-item label="分类名称：">
          <el-input v-model="tab.category" maxlength="5" show-word-limit placeholder="分类名称" />
        </el-form-item>

        <el-icon class="del-category" :size="16" @click="removeCategory(tabIndex)">
          <CircleCloseFilled />
        </el-icon>

        <VueDraggable v-model="tab.default_sub_list" :animation="150" ghostClass="ghost" class="content"
          @end="handleUpdateComponent">
          <div class="goods-item" v-for="(item, index) in tab.default_sub_list" :key="item.id">
            <div class="left">
              <div class="avatar-uploader">
                <el-image v-if="item.image" :src="item.image" class="avatar" fit="cover" />
                <i v-else class="el-icon-plus avatar-uploader-icon"><el-icon>
                    <Plus />
                  </el-icon></i>
              </div>
            </div>
            <div class="right" v-if="tab.type !== 'coach'">
              <p class="text" style="font-weight: bold">{{ item.name || '此处显示内容标题' }}</p>
              <p class="text remark-text" style="font-size: 12px; color: #999">{{
                item.remark || '此处显示内容描述'
              }}</p>
              <p class="text price_text" v-if="tab.type === 'package' || tab.type === 'card'">￥{{
                item.price
              }}</p>
            </div>

            <div class="right" v-else>
              <div>
                <div class="title mgB-10" v-if="tab.show_item_name !== 0">
                  {{ item.name }}
                </div>
                <div class="flex-between mgB-10">
                  <div class="flex align-center">
                    <div class="flex-center sex-man" v-if="item.gender === 0">
                      <img class="icon" src="@/assets/img/coach-man.png" />
                      <span>男</span>
                    </div>

                    <div class="flex-center sex-woman" v-if="item.gender === 1">
                      <img class="icon" src="@/assets/img/coach-woman.png" />
                      <span>女</span>
                    </div>
                  </div>
                </div>
                <div>
                  <span class="coach-tip">教龄：{{ item.drivingYears }}年</span>
                </div>
              </div>
            </div>

            <el-icon class="del-icon" :size="16" color="red" @click="removeItem(tabIndex, index)">
              <CircleCloseFilled />
            </el-icon>
          </div>
          <!--          <el-button-->
          <!--            type="primary"-->
          <!--            @click="addItem(tabIndex)"-->
          <!--            plain-->
          <!--            :icon="Plus"-->
          <!--            style="width: 100%; margin-bottom: 10px"-->
          <!--          >-->
          <!--            添加内容-->
          <!--          </el-button>-->
          <el-tag type="primary" class="submit-btn" style="margin-bottom: 10px" @click="addItem(tabIndex)">关联内容</el-tag>
        </VueDraggable>
      </div>
    </div>

    <!--    <el-button type="warning" plain icon="Plus" @click="addCategory" style="width: 100%">-->
    <!--      添加分类-->
    <!--    </el-button>-->
    <el-tag type="warning" class="submit-btn" @click="addCategory">添加分类</el-tag>

    <div class="component-style">
      <common-style :content-data="showComponentData" @update-style="handleUpdateStyle"></common-style>
    </div>

    <category-shop-dialog v-if="showClassTypeDialog" :show-class-dialog="showClassTypeDialog"
      @close-dialog="handleCloseClassDialog"></category-shop-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, watch, toRaw } from 'vue'
import { VueDraggable } from 'vue-draggable-plus'
import { Plus, CircleCloseFilled } from '@element-plus/icons-vue'
import debounce from 'lodash/debounce'
import CommonStyle from '@/views/decoration/diyComponents/CommonStyleComponent/CommonStyle.vue'
import CategoryShopDialog from '@/views/decoration/diyComponents/CategoryShopDialog.vue'

const props = defineProps({
  contentData: {
    type: Object,
    default: () => ({})
  }
})
const emit = defineEmits(['updateData'])

const showComponentData = ref(props.contentData)
const showClassTypeDialog = ref(false)
const activeIndex = ref(-1)

interface FormData {
  tabStyle: any
  titleFontSize: number
  titleColor: string
  titleFontWeight: number
  descColor: string
  borderRadius: number
}

const form = reactive<FormData>({
  tabStyle: {
    titleColor: '#333333',
    inactiveTitleColor: '#999999',
    underlineColor: '#60c041',
    backgroundColor: '#ffffff',
    tabFontSize: 18
  },
  titleFontSize: 14,
  titleColor: '#333333',
  titleFontWeight: 600,
  descColor: '#666666',
  borderRadius: 12
})

// 同步样式变更
watch(
  form,
  () => {
    emitFormUpdate()
  },
  { deep: true }
)

const emitFormUpdate = debounce(() => {
  const raw = toRaw(form)
  showComponentData.value.tabStyle = raw.tabStyle
  showComponentData.value.itemStyle = {
    title: {
      fontSize: raw.titleFontSize,
      color: raw.titleColor,
      fontWeight: raw.titleFontWeight
    },
    desc: {
      color: raw.descColor
    },
    borderRadius: raw.borderRadius
  }

  handleUpdateComponent()
}, 300)

// function handleSuccess(file: any, tabIndex: number, index: number) {
//   showComponentData.value.tabs[tabIndex].default_sub_list[index].imgUrl = file.data.url
//   handleUpdateComponent()
// }
//
// function beforeUpload(file: any) {
//   const isLt2M = file.size / 1024 / 1024 < 2
//   if (!['image/jpeg', 'image/png', 'image/gif'].includes(file.type)) {
//     ElMessage.error('仅支持 JPG/PNG/GIF 格式！')
//     return false
//   }
//   if (!isLt2M) {
//     ElMessage.error('图片大小不能超过 2MB！')
//     return false
//   }
// }

function addItem(tabIndex: number) {
  activeIndex.value = tabIndex
  showClassTypeDialog.value = true
}

function handleCloseClassDialog(value: any) {
  if (value) {
    if (value.type === 'package') {
      // showComponentData.value.tabs[activeIndex.value].default_sub_list.push(...value.listData)
      showComponentData.value.tabs[activeIndex.value].default_sub_list = value.listData
    } else if (value.type === 'coach') {
      const newData = value.listData.map((item: any) => {
        return {
          id: item.id,
          name: item.name,
          image: item.avatar,
          mobile: item.phone,
          remark: item.introduction
        }
      })
      // showComponentData.value.tabs[activeIndex.value].default_sub_list.push(...newData)
      showComponentData.value.tabs[activeIndex.value].default_sub_list = newData
    } else if (value.type === 'trainingGround') {
      const newData = value.listData.map((item: any) => {
        return {
          id: item.id,
          name: item.name,
          image: item.img,
          remark: item.address
        }
      })
      // showComponentData.value.tabs[activeIndex.value].default_sub_list.push(...newData)
      showComponentData.value.tabs[activeIndex.value].default_sub_list = newData
    } else if (value.type === 'card') {
      const newData = value.listData.map((item: any) => {
        return {
          id: item.id,
          name: item.name,
          image: item.detailsImg,
          remark: item.remark,
          price: `${item.price}元/${item.validity}天`
        }
      })
      // showComponentData.value.tabs[activeIndex.value].default_sub_list.push(...newData)
      showComponentData.value.tabs[activeIndex.value].default_sub_list = newData
    } else if (value.type === 'video') {
      const newData = value.listData.map((item: any) => {
        return {
          id: item.id,
          name: item.name,
          image: item.img,
          remark: item.subhead
        }
      })
      // showComponentData.value.tabs[activeIndex.value].default_sub_list.push(...newData)
      showComponentData.value.tabs[activeIndex.value].default_sub_list = newData
    } else if (value.type === 'registrationSite') {
      const newData = value.listData.map((item: any) => {
        return {
          id: item.id,
          name: item.name,
          image: item.photo,
          remark: item.address
        }
      })
      showComponentData.value.tabs[activeIndex.value].default_sub_list = newData
    }
    showComponentData.value.tabs[activeIndex.value].type = value.type
  }
  // 移除默认项
  showComponentData.value.tabs[activeIndex.value].default_sub_list = showComponentData.value.tabs[
    activeIndex.value
  ].default_sub_list.filter((item: any) => !item.isDefault)

  showClassTypeDialog.value = false
}

function removeItem(tabIndex: number, index: number) {
  showComponentData.value.tabs[tabIndex].default_sub_list.splice(index, 1)

  if (showComponentData.value.tabs[tabIndex].default_sub_list.length === 0) {
    showComponentData.value.tabs[tabIndex].default_sub_list.push({
      id: -1,
      name: '此处显示内容名称，最多两行',
      remark: '此处显示描述，最多两行',
      price: '免费',
      image: 'https://image.lutongjiakao.com/system/82895dd1bc8c4960b05f552446bf5c76.png',
      tags: [],
      mobile: '',
      isDefault: true
    })
  }

  handleUpdateComponent()
}

function addCategory() {
  showComponentData.value.tabs.push({
    category: '新分类',
    type: 'default',
    default_sub_list: [
      {
        id: 1,
        name: '此处显示内容名称，最多两行',
        remark: '此处显示描述，最多两行',
        price: '免费',
        image: 'https://image.lutongjiakao.com/system/82895dd1bc8c4960b05f552446bf5c76.png',
        tags: [],
        mobile: ''
      }
    ]
  })
  handleUpdateComponent()
}

function removeCategory(index: number) {
  showComponentData.value.tabs.splice(index, 1)
  handleUpdateComponent()
}

function handleUpdateComponent() {
  emit('updateData', showComponentData.value)
}

function handleUpdateStyle(val: any) {
  showComponentData.value.style = val
  handleUpdateComponent()
}

onMounted(() => {
  if (showComponentData.value.itemStyle.title) {
    form.titleFontSize = showComponentData.value.itemStyle.title.fontSize
    form.titleColor = showComponentData.value.itemStyle.title.color
    form.titleFontWeight = showComponentData.value.itemStyle?.title.fontWeight

    form.descColor = showComponentData.value.itemStyle.desc.color
    form.borderRadius = showComponentData.value.itemStyle.borderRadius
  }

  if (Object.keys(showComponentData.value.tabStyle).length !== 0) {
    form.tabStyle = showComponentData.value.tabStyle
  }
})
</script>

<style scoped lang="scss">
.style-page {
  padding: 20px;

  .head-page-title {
    padding-top: 10px;
    padding-bottom: 20px;
    font-size: 18px;
    font-weight: bold;
    color: black;
  }

  .line {
    width: 100%;
    height: 1px;
    background: #f5f7fa;
  }

  .category-area {
    border: 1px solid #eee;
    padding: 10px;
    margin-bottom: 20px;
    border-radius: 6px;
    background-color: #f7f8fa;
    position: relative;

    &:hover .del-category {
      display: block;
    }

    .del-category {
      display: none;
      position: absolute;
      top: 0;
      right: 0;
      cursor: pointer;
      color: #8c939d;
    }

    .category-header {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 20px;
    }

    .goods-item {
      display: flex;
      align-items: flex-start;
      padding: 10px;
      border: 1px solid #eee;
      border-radius: 6px;
      margin-bottom: 12px;
      position: relative;

      &:hover .del-icon {
        display: block;
      }

      .left {
        margin-right: 12px;

        .avatar-uploader {
          width: 120px;
          height: 80px;
          border: 1px dashed #d9d9d9;
          border-radius: 6px;
          overflow: hidden;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;

          .avatar {
            width: 100%;
            height: 80px;
            object-fit: cover;
          }

          .avatar-uploader-icon {
            font-size: 28px;
            color: #aaa;
          }
        }
      }

      .right {
        flex: 1;
        font-size: 14px;
        font-weight: bold;
        color: #606266;

        .text {
          margin-bottom: 6px;
        }

        .price_text {
          color: rgb(231, 76, 60);
          font-weight: bold;
          margin-top: 20px;
        }

        .remark-text {
          display: -webkit-box;
          overflow: hidden;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }

        .coach-tip {
          color: #9e9e9e;
          font-size: 12px;
        }

        .sex-man {
          color: #3f89f4;
          background-color: #ebf3fd;
          width: 45px;
          height: 24px;
          border-radius: 6px;
          font-size: 12px;
          margin-right: 6px;

          .icon {
            width: 14px;
            height: 14px;
            margin-right: 4rpx;
          }
        }

        .sex-woman {
          color: #f284a3;
          background-color: #fef3f6;
          width: 45px;
          height: 24px;
          border-radius: 6px;
          font-size: 12px;
          margin-right: 6px;

          .icon {
            width: 14px;
            height: 14px;
            margin-right: 4px;
          }
        }

        .mgB-10 {
          margin-bottom: 5px;
        }

        .flex {
          display: flex;
        }

        .flex-between {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }

        .flex-center {
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .align-center {
          align-items: center;
        }

      }

      .del-icon {
        display: none;
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;
        color: #8c939d;
      }
    }
  }

  .component-style {
    margin: 20px 0;

    .title {
      font-size: 14px;
      font-weight: bold;
      color: black;
      margin-bottom: 20px;
    }

    .flex {
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 0 3px;
    }
  }

  .submit-btn {
    width: 100%;
    height: 40px !important;
    cursor: pointer;
    font-size: 14px;
  }
}
</style>
